<template>
    <el-card class="box-card">
        <h3>用户登录</h3>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="账号">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input  show-password v-model="form.password"></el-input>
            </el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
        </el-form>
    </el-card>
</template>
<script>
    export default {
        data(){
            return {
                form: { username:'',password:''}
            }
        },
        methods: {
            //登录验证
            login(){
                // qs.stringify ---> username=xxx&password=xxx
                this.$http.post('/user/login',this.$qs.stringify(this.form)).then(resp => {
                    console.log('login',resp.data)
                    if(resp.data){
                        //保存JWT令牌
                        localStorage.setItem("userId",resp.data.userId)
                        localStorage.setItem("token",resp.data.token)
                        //有用户返回，登录成功后跳转主页面
                        this.$router.push({path:'/main'})
                    }else{
                        this.$message('账号或密码错误')
                    }
                });
            }
        }
    }
</script>
<style>
    .box-card {
        margin: 200px auto;
        width: 480px;
    }
</style>
